<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML5，前端开发，Java大数据，PHP开发，python人工智能。" />
  <meta name="description" content="该网站是一个用于在IT线教育宣传。" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>响应式页面</title>
  <link rel="shortcut icon" href="images/fav.jpg" type="image/x-jpeg">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
</head>
<body>
<!--导航栏-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--导航栏按钮-->
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!--logo-->
        <a class="navbar-brand" href="index.html">
          <img src="images/logo.gif" alt="logo">
        </a>
      </div>
      <!--导航-->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
          <li><a href="#bbs"><span class="glyphicon glyphicon-flag"></span> 讨论</a></li>
          <li><a href="#html5"><span class="glyphicon glyphicon-fire"></span> 前端开发</a></li>
          <li><a href="#course"><span class="glyphicon glyphicon-folder-close"></span> 最新课程</a></li>
          <li><a href="#app"><span class="glyphicon glyphicon-thumbs-up item-icon"></span> 移动APP</a></li>
          <li><a href="#contact"><span class="glyphicon glyphicon-earphone item-icon"></span> 联系我们</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!--home-->
 <section id="home">
   <div class="mask">
     <div class="container">
       <div class="row wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.5s">
         <div class="col-md-1"></div>
         <div class="col-md-10">
           <h1>Bootstrap实战课程等你来战！</h1>
           <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员 <br />
             培训技能的目标：使用Bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
           <img src="images/php.jpg" alt="home" class="img-responsive">
         </div>
         <div class="col-md-1"></div>
       </div>
     </div>
   </div>
 </section>
<!--bbs-->
  <section id="bbs">
    <div class="container">
      <div class="row">
        <div class="col-md-4 wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.5s">
          <a href="http://www.hspstudio.club" target="_blank">
            <img src="images/a.png" alt="Android">
            <h3>Web前端开发</h3>
            <p>Web前端开发开发技术交流、问题求助、实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4 wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="1s">
          <a href="http://www.hspstudio.club" target="_blank">
            <img src="images/b.png" alt="Android">
            <h3>Python人工智能</h3>
            <p>Python人工智能开发技术交流，海量实战干货分享</p>
          </a>
        </div>
        <div class="col-md-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="1.5s">
          <a href="http://www.hspstudio.club" target="_blank">
            <img src="images/i.png" alt="Android">
            <h3>嵌入式底层开发</h3>
            <p>底层嵌入式开发、实战案例等技术交流讨论</p>
          </a>
        </div>
      </div>
    </div>
  </section>
  <!--html5-->
  <section id="html5">
    <div class="container">
      <div class="row">
        <div class="col-md-6 wow fadeInLeft">
          <h2>HTML5前端开发</h2>
          <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
          <p><span class="glyphicon glyphicon-grain icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
          <p><span class="glyphicon glyphicon-grain icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
        </div>
        <div class="col-md-6 wow fadeInRight">
          <img src="images/html5.jpg" alt="html5" class="img-responsive">
        </div>
      </div>
    </div>
  </section>
  <!--bootstrap-->
  <section id="bootstrap">
    <div class="container">
      <div class="row">
        <div class="col-md-6 wow fadeInUp">
          <img src="images/bootstrap.jpg" alt="bootstrap" class="img-responsive">
        </div>
        <div class="col-md-6 wow fadeInUp">
          <h2>Bootstrap实战视频教程</h2>
          <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
          <p><span class="glyphicon glyphicon-grain icon"></span>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。</p>
          <p><span class="glyphicon glyphicon-grain icon"></span>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
        </div>
      </div>
    </div>
  </section>
  <!--最新课程-->
  <section id="course">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>最新课程</h1>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift"class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="images/swift.jpg" alt="swift" class="img-responsive">
            <a href="www.baidu.com" class="btn btn-primary" role="button">加入学习</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--app-->
  <section id="app">
    <div class="container">
      <div class="row">
        <div class="col-md-6 wow fadeInLeft">
          <h1>深圳求知讲堂IT教育移动APP下载</h1>
          <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
          <button class="btn btn-primary"><span class="glyphicon glyphicon-save"> iPhone版</span></button>
          <button class="btn btn-primary"><span class="glyphicon glyphicon-save"> Android版</span></button>
        </div>
        <div class="col-md-6 wow fadeInRight">
          <img src="images/app-banner.jpg" alt="app" class="img-responsive">
        </div>
      </div>
    </div>
  </section>
  <!--contact-->
  <section id="contact">
    <div class="mask">
      <div class="container">
        <div class="row wow fadeInUp">
          <div class="col-md-6">
            <h1><span class="glyphicon glyphicon-send item-icon"></span> 联系我</h1>
            <p class="desc">该线教育是一个IT线上教育平台，目前已有超100万注册用户，30万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五湖四海伙伴们热情和踏实的学习态度！</p>
            <address>
              <p><span class="glyphicon glyphicon-home item-icon"></span> 地址:深圳市南山区求知讲堂在线教育集团</p>
              <p><span class="glyphicon glyphicon-phone item-icon"></span> 联系电话：400 1817 898</p>
              <p><span class="glyphicon glyphicon-envelope item-icon"></span> 邮箱:qiuzhijiangtang@163.com</p>
            </address>
          </div>
          <div class="col-md-6">
            <form action="#">
              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="您的姓名">
              </div>
              <div class="col-md-6">
                <input type="email" class="form-control" placeholder="您的邮箱">
              </div>
              <div class="col-md-12">
                <input type="text" class="form-control" placeholder="标题">
              </div>
              <div class="col-md-12">
                <textarea name="content"   class="form-control" placeholder="留言内容"></textarea>
              </div>
              <div class="col-md-8">
                <input type="submit" class="form-control" value="提交">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--footer-->
  <section id="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>&copy; 2010-2030 在线教育 深ICP备14041383号 版权所有</p>
        </div>
      </div>
    </div>
  </section>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script>
  //设置导航跳转时的偏移值
  $('nav').singlePageNav({
    offset:70 //设置偏移值为70px
  });
  //点击小屏幕菜单跳转完成后立即关闭该菜单
  $('.navbar-collapse a').click(function () {
    $('.navbar-collapse').collapse('hide');
  })

  //初始动画wow动画
  new WOW().init();
</script>
</html>